<template>
    <div :class="className" :style="{height: height, width: width}"></div>
</template>

<script>
    import resize from './mixins/resize'
    export default {
        name: "echart", // 通用的echart组件
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '200px'
            },
            chartOption: {
                type: Object,
                default() {
                    return {
                        title: {
                            text: '世界人口总量',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '1%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
                        },
                        series: [
                            {
                                name: '2011年',
                                type: 'bar',
                                data: [18203, 23489, 29034, 104970, 131744, 630230]
                            },
                            {
                                name: '2012年',
                                type: 'bar',
                                data: [19325, 23438, 31000, 121594, 134141, 681807]
                            }
                        ]
                    }
                }
            }
        },
        watch: {
            chartOption: {
                deep: true,
                handler(val) {
                    this.setOption(val)
                }
            }
        },
        data() {
            return {
                chart: null
            }
        },
        methods: {
            /**
             * 初始化图表实例
             */
            initChart() {
                this.chart = this.$echarts.init(this.$el);
                this.setOption(this.chartOption)
            },

            /**
             * 设置图标的option
             * @param {Object} option
             */
            setOption(option = this.chartOption) {
                this.chart.setOption(option)
            }
        },
        mounted() {
            this.initChart()
        },
        beforeDestroy() {
            if (!this.chart) return;
            this.chart.dispose();
            this.chart = null
        }
    }
</script>

<style scoped>

</style>